<template>
  <el-radio-group
    v-model="valueModel"
    v-bind="props"
    @change="handleChangeRadio"
  >
    <el-radio
      v-for="(item,index) in options"
      :key="index"
      :label="item[valueKey]"
      :disabled="item[disabledKey]"
    >
      {{ item[labelKey] }}
    </el-radio>
  </el-radio-group>
</template>

<script>
import Vue from 'vue';
import {Radio, RadioGroup} from "element-ui";
Vue.use(Radio);
Vue.use(RadioGroup);
/**
 * 单选按钮
 * @author maolin
 */
export default {
  name: "ErpFormRadio",
  components: {
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
    /**
     * 选项
     * @public
     */
    options: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 属性
     * @public
     */
    props: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 额外配置
     * ```js
     * return {
          labelKey: 'label',
          valueKey: 'value',
          disabledKey: 'disabled'
        }
     * ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {
          labelKey: 'label',
          valueKey: 'value',
          disabledKey: 'disabled'
        };
      }
    }
  },
  computed: {
    valueModel: {
      get () {
        let value = this.value !== null ? this.value.toString() : '';
        return value;
      },
      set (val) {
        this.$emit('value-change', val);
      }
    },
    valueKey () {
      return this.extra && this.extra.valueKey ? this.extra.valueKey : 'value';
    },
    labelKey () {
      return this.extra && this.extra.labelKey ? this.extra.labelKey : 'label';
    },
    disabledKey () {
      return this.extra && this.extra.disabledKey ? this.extra.disabledKey : 'disabled';
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 监听更新单选值
     * @param value
     */
    handleChangeRadio (value) {
      this.valueModel = value;
    },
  }
};
</script>

<style lang="scss" scoped>
</style>
